<script setup>
import { onMounted, ref } from 'vue'

defineProps({
  row: {
    type: Object,
    required: true
  },
  detailList: {
    type: Array,
    default: () => []
  }
})
</script>

<template>
  <div>
    <!-- 商品基本信息 -->
    <div style="margin-bottom: 20px;">
      <h3>{{ row.title }} - {{ row.code }}</h3>
      <p><strong>商品描述：</strong>{{ row.description }}</p>
      <p><strong>条码：</strong>{{ row.barcode }}</p>
      <p><strong>订单数量：</strong>{{ row.outCount }}</p>
      <p><strong>待拣货数量：</strong>{{ row.pendingPickQuantity }}</p>
      <p><strong>已拣货数量：</strong>{{ row.pickedQuantity }}</p>
    </div>

    <!-- 库存明细表格 -->
    <el-table :data="detailList" style="width: 100%">
      <!-- SKU ID (规格编码) -->
      <el-table-column prop="skuId" label="规格编码" />

      <!-- 出库数量 -->
      <el-table-column prop="outCount" label="订单数量" />

      <!-- 仓库ID -->
      <el-table-column prop="targetWarehouseId" label="仓库ID" />

      <!-- 库区ID -->
      <el-table-column prop="targetWarehouseAreaId" label="库区ID" />

      <!-- 库位ID -->
      <el-table-column prop="targetWarehouseAreaLocaId" label="库位ID" />

      <!-- 拣货状态 -->
      <el-table-column prop="pickStatus" label="拣货状态">
        <template #default="{ row }">
          {{ row.pickStatus === 1 ? '未拣货' : row.pickStatus === 2 ? '已拣货' : '未知' }}
        </template>
      </el-table-column>

      <!-- 拣货员ID -->
      <el-table-column prop="pickEmpId" label="拣货员ID">
        <template #default="{ row }">
          {{ row.pickEmpId || '未分配' }}
        </template>
      </el-table-column>

      <!-- 创建时间 -->
      <el-table-column prop="createTime" label="创建时间" />

      <!-- 操作 -->
      <el-table-column label="操作" width="80">
        <template #default="{ row }">
          <el-button size="small" type="primary" @click="$emit('pick', row)">
            <i class="el-icon el-icon-edit"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>